<template>
    <div class="dayoffA">
      <el-dialog title="请假信息表" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form" label-width="100px">
          <!-- <el-form-item label="标题" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="审批人">
            <el-select v-model="form.region" placeholder="请选择责任上级进行审批">
            <el-option label="审批人1" value="shanghai"></el-option>
            <el-option label="审批人2" value="beijing"></el-option>
            <el-option label="审批人3" value="beijing"></el-option>
            </el-select>
        </el-form-item> -->
        <el-form-item label="审批人:" prop="leader">
          <el-select v-model="form.leader" placeholder="请选择责任上级进行审批">
            <el-option v-for="(item,index) in leaderMap" :key="index" :label="item.realName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="审批人" prop="checkMan">
          <el-input v-model="form.checkMan" placeholder="请选择责任上级进行审批" class="check"></el-input>
        </el-form-item> -->
        <el-form-item label="起始时间" prop="date1">
            <div class="block" style="float:left">
              <!-- <span class="demonstration" style="margin:0 10px;">起始时间</span> -->
              <el-date-picker
                v-model="form.date1"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions1">
              </el-date-picker>
            </div>   
        </el-form-item>
        <el-form-item label="结束时间" prop="date2">
           <div class="block" style="float:left">
              <!-- <span class="demonstration" style="margin:0 10px;">结束时间</span> -->
              <el-date-picker
                v-model="form.date2"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions1">
              </el-date-picker>
            </div>
            
        </el-form-item>
        
        <el-form-item label="即时审批" prop="checkNow">
            <el-switch v-model="form.checkNow"></el-switch>
        </el-form-item>
        <!-- <el-form-item label="请假性质">
            <el-checkbox-group v-model="form.type">
            <el-checkbox label="病假" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item> -->
        <el-form-item label="请假性质" prop="reason">
            <el-radio-group v-model="form.reason">
            <el-radio label="因病请假"></el-radio>
            <el-radio label="处理个人事务"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="原因描述" prop="desc">
            <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit" style="margin-left:15%">创建申请表</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
        </el-form>
      </el-dialog>
        
        
        
       <el-card class="box-card1">
         <div slot="header" class="clearfix">
            <span>请假申请表</span>
              <!-- <el-button style="float: right;margin-right:15px;margin-left:0" type="success" @click="nextList">保存</el-button>
              <el-button style="float: right;margin-right:15px" type="primary" @click="prevList">提交</el-button> -->
            <el-button type="primary" @click="dialogFormVisible = true" style="float:right;margin:0 20px;">请假申请</el-button>
        </div>  
        <el-table
        :data="tableData"
        style="width: 100%"
        align="center">
        <el-table-column
          type="index"
          label="序号"
          width="70"
          align="center">
        </el-table-column>
        <el-table-column
          prop="leavetype"
          label="请假类型"
           align="center"
          width="130"
          :filters="[{ text: '因私请假', value: '因私请假' }, { text: '因病请假', value: '因病请假' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.leavetype === '因私请假' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.leavetype}}</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="leaderName"
          label="审批人"
          width="100"
          align="center"
        >
        </el-table-column>
        
        <el-table-column
          prop="leaveStartTime"
          label="起始时间"
          sortable
          width="160"
          
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="leaveEndTime"
          label="结束时间"
          sortable
          width="160"
           align="center"
        >
        </el-table-column>
        <el-table-column
          prop="leaveReason"
          label="请假原因"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="askTime"
          label="申请时间"
          sortable
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="checkState"
          label="当前状态"
          width="100"
          :filters="[{ text: '已申请', value: '已申请' }, { text: '已同意', value: '已同意' },{ text: '已拒绝', value: '已拒绝' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.checkState === '已拒绝' ? 'danger' : 'primary'"
              disable-transitions>{{scope.row.checkState}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
   
    </div>
    
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      activeNames: ['1'],
      list: [
        {
          author: "name",
          display_time: "2006-05-31 02:45:20",
          id: "710000197202081232",
          pageviews: 1216,
          status: "deleted",
          title:
            "Hlhyabklt yscjbij shubuqs qbxpc dhvwl vnqx vpbx jwlaws dkjh prjhp nuevxuou eusss qicyhlilc mubqdvsce kzciptq rxicicqq."
        }
      ],
      tableData: [
        {
            "id": 2,
            "userId": 1,
            "leavetype": "因私请假",
            "leaveStartTime": "2018-08-05 10:26:24",
            "leaveEndTime": "2018-07-31 11:26:53",
            "askTime": "2018-08-04 13:22:29",
            "leaveReason": "发烧",
            "checkUserId": 3,
            "checkTime": "2018-08-22 21:33:10",
            "checkState": 1,
            "checkReason": null,
            "userName": null
        },
      ],
      leaderMap: [],
      listLoading: false,
      dialogFormVisible: false,
      pickerOptions1: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      value2: "",
      value1: "",
      form: {
        name: "",
        leader: "",
        date1: "",
        date2: "",
        checkNow: false,
        reason: "",
        desc: ""
      },
      formLabelWidth: "120px"
    };
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  mounted() {},
  created() {
    //获取领导信息列表
    this.$axios
      .post("http://localhost:8088/getAllLeaders", qs.stringify({}), {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      .then(res => {
        console.log(res.data.data);
        // this.leaderMap = res.data.data
        let a = res.data.data;

        for (let i in a) {
          let obj = {};
          this.$set(obj, "realName", a[i].realName);
          this.$set(obj, "id", a[i].id);
          this.leaderMap.push(obj);
        }
      })
      .catch(err => {
        console.log(err);
      });

      //获取请假信息表
      this.$axios
      .post("http://localhost:8088/getLeaveinfo", qs.stringify({}), {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      .then(res => {
        console.log(res.data.data);
        this.tableData = res.data.data
        for (let i in this.tableData) {
          switch(this.tableData[i].checkState){   //状态的显示转化
              case 0:
                this.tableData[i].checkState = "已申请";
                break;
              case 1:
                this.tableData[i].checkState = "已同意";
                break;
              case 2:
                this.tableData[i].checkState = "已拒绝";
                
                break;
            }
        }
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    addUser() {},
     formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
    onSubmit() {
      console.log(this.form);
      let a = this.form.date1.toString().substr(0, 33);
      let b = this.form.date2.toString().substr(0, 33);
      if (this.form.reason == "") console.log(a, b);
      this.$axios
        .post(
          "http://localhost:8088/leaveReq",
          qs.stringify({
            userId: 123,
            leavetype: this.form.reason, //
            leaveStartTime: a,
            leaveEndTime: b,
            leaveReason: this.form.desc, //
            checkUserId: this.form.leader //
          }),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(res => {
          console.log(res);
          this.$notify({
            title: "成功",
            message: "申请成功",
            type: "success"
          });
          this.resetForm("form");
          // this.list = res.data.data
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // prevList() {
    //   console.log("previos");
    // },
    // nextList() {
    //   console.log("next");
    // }
  }
};
</script>


<style lang="scss" scoped>
.text {
  font-size: 20px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.clearfix {
  span {
    font-size: 20px;
    line-height: 40px;
  }
}
.Folded{
  font-size: 22px;
  line-height: 40px;
  .el-collapse-item__header{
    font-size: 30px;
  }
}
.box-card,.box-card1 {
  margin: 20px;
  .check {
    width: 30%;
  }
}
</style>


